<template>
  <div class="shelf">
    <div class="publicSearch">
      <div class="searchBar" :style="{ height: isMoreSearch ? 'auto' : '' }">
        <el-button-group>
          <el-button @click="getCellData" size="mini" icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh"
            >重置</el-button
          >
        </el-button-group>
        <div>
          <span>关键字搜索</span>
          <el-input
            v-model="searchData.keyWords"
            size="mini"
            placeholder="名称/编码"
            clearable
          ></el-input>
        </div>
        <div>
          <span>货位组</span>
          <el-select
            v-model="searchData.shelfInfoId"
            size="mini"
            filterable
            placeholder="请选择货位组"
            clearable
          >
            <el-option
              v-for="item in shelfs"
              :key="item.shelfInfoId"
              :label="item.shelfName"
              :value="item.shelfInfoId"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>货位使用类型</span>
          <el-select
            v-model="searchData.cellUseType"
            size="mini"
            filterable
            placeholder="请选择货位使用类型"
            clearable
          >
            <el-option
              v-for="item in cellUseTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div>
          <span>周转需求</span>
          <el-select v-model="searchData.cellAbcLevel" size="mini" filterable placeholder="请选择周转需求" clearable>
            <el-option
                v-for="item in cellAbcLevels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div> -->
        <!-- <div>
          <span>拣货方式</span>
          <el-select v-model="searchData.cellPickType" size="mini" filterable placeholder="请选择拣货方式" clearable>
            <el-option
              v-for="item in cellPickTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div> -->
        <!-- <div>
          <span>X坐标</span>
          <el-input v-model="searchData.xCoordinate" size="mini" placeholder="X坐标" clearable></el-input>
        </div>
        <div>
          <span>Y坐标</span>
          <el-input v-model="searchData.yCoordinate" size="mini" placeholder="Y坐标" clearable></el-input>
        </div> -->
      </div>
      <span
        class="moreSearchBtn"
        :class="isMoreSearch ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
        @click="isMoreSearch = !isMoreSearch"
      ></span>
    </div>

    <div class="headerBtns">
      <el-button
        size="mini"
        type="primary"
        round
        icon="iconfont icon-xinzeng"
        @click="showNewModal"
        >新增
      </el-button>
      <el-button
        size="mini"
        type="primary"
        round
        icon="iconfont icon-xinzeng"
        @click="printCells"
        >批量打印
      </el-button>
    </div>
    <el-dialog
      title="新增货位"
      :visible.sync="dialogNewVisible"
      :before-close="handleClose"
      width="900px"
      style="margin-top: -10vh"
      :close-on-click-modal="false"
    >
      <div class="cellModalBox">
        <el-form class="clearFloat" :model="form" :rules="rules" ref="form">
          <el-form-item
            label="编码"
            prop="cellCode"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.cellCode"
              placeholder="请输入编码"
              style="width: 90%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="名称"
            prop="cellName"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.cellName"
              placeholder="请输入名称"
              style="width: 90%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="货位组"
            prop="shelfInfoId"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="form.shelfInfoId"
              filterable
              placeholder="请选择货位组"
              style="width: 90%"
            >
              <el-option
                v-for="item in shelfs"
                :key="item.shelfInfoId"
                :label="item.shelfName"
                :value="item.shelfInfoId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="上架顺序" prop="groundOrder" :label-width="formLabelWidth">
            <el-input-number v-model="form.groundOrder" :min="0" label="请输入上架顺序" style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="拣货顺序" prop="pickOrder" :label-width="formLabelWidth">
            <el-input-number v-model="form.pickOrder" :min="0" label="请输入拣货顺序" style="width: 90%;"></el-input-number>
          </el-form-item> -->
          <el-form-item
            label="货位使用类型"
            prop="cellUseType"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="form.cellUseType"
              filterable
              placeholder="请选择货位使用类型"
              style="width: 90%"
            >
              <el-option
                v-for="item in cellUseTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="周转需求" prop="cellAbcLevel" :label-width="formLabelWidth">
            <el-select v-model="form.cellAbcLevel" filterable placeholder="请选择周转需求" style="width: 90%;">
              <el-option
                  v-for="item in cellAbcLevels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <!--  <el-form-item label="拣货方式" prop="cellPickType" :label-width="formLabelWidth">
              <el-select v-model="form.cellPickType" filterable placeholder="请选择拣货方式" style="width: 90%;">
                <el-option
                  v-for="item in cellPickTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->
          <!-- <div style="float: left;width: 100%;">
            <el-divider content-position="left"></el-divider>
          </div>
          <el-form-item label="长(m)" prop="length" :label-width="formLabelWidth">
            <el-input-number v-model="form.length" controls-position="right" :min="0" label="请输入长"
                             style="width: 90%;" @change="changeVolume"></el-input-number>
          </el-form-item>
          <el-form-item label="宽(m)" prop="wide" :label-width="formLabelWidth">
            <el-input-number v-model="form.wide" controls-position="right" :min="0" label="请输入宽"
                             style="width: 90%;" @change="changeVolume"></el-input-number>
          </el-form-item>
          <el-form-item label="高(m)" prop="high" :label-width="formLabelWidth">
            <el-input-number v-model="form.high" controls-position="right" :min="0" label="请输入高"
                             style="width: 90%;" @change="changeVolume"></el-input-number>
          </el-form-item> -->
          <!-- <div style="float: left; width: 100%">
            <el-divider content-position="left"></el-divider>
          </div> -->
          <!-- <el-form-item label="数量限制"  :label-width="formLabelWidth">
            <el-input-number v-model="form.quantityLimit" controls-position="right" :precision="2" :min="0"
                              label="数量限制" style="width: 90%;"></el-input-number>
          </el-form-item> -->
          <!-- <el-form-item label="sku种类限制" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.skuLimit"
              controls-position="right"
              :precision="0"
              :min="0"
              label="sku种类限制"
              style="width: 90%"
            ></el-input-number>
          </el-form-item> -->
          <!-- <el-form-item label="体积限制(m³)" prop="volumeLimit" :label-width="formLabelWidth">
            <el-input-number v-model="form.volumeLimit" controls-position="right" :precision="2" :min="0"
                             :max="formVolumeLimitMax" label="请输入体积限制" style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="重量限制(kg)" prop="weightLimit" :label-width="formLabelWidth">
            <el-input-number v-model="form.weightLimit" controls-position="right" :precision="2" :min="0"
                             label="请输入重量限制" style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="箱数限制" prop="boxLimit" :label-width="formLabelWidth">
            <el-input-number v-model="form.boxLimit" controls-position="right" :precision="2" :min="0" label="请输入箱数限制"
                             style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="托盘限制" prop="palletLimit" :label-width="formLabelWidth">
            <el-input-number v-model="form.palletLimit" controls-position="right" :precision="2" :min="0"
                             label="请输入托盘限制" style="width: 90%;"></el-input-number>
          </el-form-item> -->
          <!-- <div style="float: left; width: 100%">
            <el-divider content-position="left"></el-divider>
          </div>
          <el-form-item
            label="X坐标"
            prop="xCoordinate"
            :label-width="formLabelWidth"
          >
            <el-input-number
              v-model="form.xCoordinate"
              controls-position="right"
              :min="0"
              label="请输入X坐标"
              style="width: 90%"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="Y坐标"
            prop="yCoordinate"
            :label-width="formLabelWidth"
          >
            <el-input-number
              v-model="form.yCoordinate"
              controls-position="right"
              :min="0"
              label="请输入Y坐标"
              style="width: 90%"
            ></el-input-number>
          </el-form-item> -->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            resetForm('form');
            dialogNewVisible = false;
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="commitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改库位"
      :visible.sync="dialogUpdateVisible"
      :before-close="handleClose2"
      width="900px"
      style="margin-top: -10vh"
      :close-on-click-modal="false"
    >
      <div class="cellModalBox">
        <el-form
          class="clearFloat"
          :model="rowData"
          :rules="rules2"
          ref="rowData"
        >
          <el-form-item
            label="库位编码"
            prop="cellCode"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="rowData.cellCode"
              placeholder="请输入编码"
              style="width: 90%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="库位名称"
            prop="cellName"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="rowData.cellName"
              placeholder="请输入名称"
              style="width: 90%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="货位组"
            prop="shelfInfoId"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="rowData.shelfInfoId"
              filterable
              placeholder="请选择货位组"
              style="width: 90%"
            >
              <el-option
                v-for="item in shelfs"
                :key="item.shelfInfoId"
                :label="item.shelfName"
                :value="item.shelfInfoId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="上架顺序" prop="groundOrder" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.groundOrder" :min="0" label="请输入上架顺序"
                             style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="拣货顺序" prop="pickOrder" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.pickOrder" :min="0" label="请输入拣货顺序" style="width: 90%;"></el-input-number>
          </el-form-item> -->
          <el-form-item label="货位使用类型" prop="cellUseType" :label-width="formLabelWidth">
            <el-select v-model="rowData.cellUseType" filterable placeholder="请选择货位使用类型" style="width: 90%;">
              <el-option
                  v-for="item in cellUseTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="周转需求" prop="cellAbcLevel" :label-width="formLabelWidth">
            <el-select v-model="rowData.cellAbcLevel" filterable placeholder="请选择周转需求" style="width: 90%;">
              <el-option
                  v-for="item in cellAbcLevels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <!--     <el-form-item label="拣货方式" prop="cellPickType" :label-width="formLabelWidth">
                 <el-select v-model="rowData.cellPickType" filterable placeholder="请选择拣货方式" style="width: 90%;">
                   <el-option
                     v-for="item in cellPickTypes"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
               </el-form-item> -->
          <!-- <div style="float: left;width: 100%;">
            <el-divider content-position="left"></el-divider>
          </div>
          <el-form-item label="长(m)" prop="length" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.length" controls-position="right" :min="0" label="请输入长"
                             style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="宽(m)" prop="wide" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.wide" controls-position="right" :min="0" label="请输入宽"
                             style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="高(m)" prop="high" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.high" controls-position="right" :min="0" label="请输入高"
                             style="width: 90%;"></el-input-number>
          </el-form-item> -->
          <!-- <div style="float: left; width: 100%">
            <el-divider content-position="left"></el-divider>
          </div> -->
          <!-- <el-form-item label="数量限制"  :label-width="formLabelWidth">
            <el-input-number v-model="rowData.quantityLimit" controls-position="right" :precision="2" :min="0"
                              label="数量限制" style="width: 90%;"></el-input-number>
          </el-form-item> -->
          <!-- <el-form-item label="sku种类限制" :label-width="formLabelWidth">
            <el-input-number
              v-model="rowData.skuLimit"
              controls-position="right"
              :precision="0"
              :min="0"
              label="sku种类限制"
              style="width: 90%"
            ></el-input-number>
          </el-form-item> -->
          <!-- <el-form-item label="体积限制(m³)" prop="volumeLimit" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.volumeLimit" controls-position="right" :precision="2" :min="0"
                             :max="rowDataVolumeLimitMax" label="请输入体积限制" style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="重量限制(kg)" prop="weightLimit" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.weightLimit" controls-position="right" :precision="2" :min="0"
                             label="请输入重量限制" style="width: 90%;"></el-input-number>
          </el-form-item>
          <el-form-item label="箱数限制" prop="boxLimit" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.boxLimit" controls-position="right" :precision="2" :min="0"
                             label="请输入箱数限制" style="width: 90%;"></el-input-number>
          </el-form-item>

          <el-form-item label="托盘限制" prop="palletLimit" :label-width="formLabelWidth">
            <el-input-number v-model="rowData.palletLimit" controls-position="right" :precision="2" :min="0"
                             label="请输入托盘限制" style="width: 90%;"></el-input-number>
          </el-form-item> -->
          <!-- <div style="float: left; width: 100%">
            <el-divider content-position="left"></el-divider>
          </div> -->
          <!-- <el-form-item
            label="X坐标"
            prop="xCoordinate"
            :label-width="formLabelWidth"
          >
            <el-input-number
              v-model="rowData.xCoordinate"
              controls-position="right"
              :min="0"
              label="请输入X坐标"
              style="width: 90%"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="Y坐标"
            prop="yCoordinate"
            :label-width="formLabelWidth"
          >
            <el-input-number
              v-model="rowData.yCoordinate"
              controls-position="right"
              :min="0"
              label="请输入Y坐标"
              style="width: 90%"
            ></el-input-number>
          </el-form-item> -->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            resetForm('rowData');
            dialogUpdateVisible = false;
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="updateForm('rowData')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div class="tableBox">
      <el-table
        highlight-current-row
        v-loading="loading.table"
        :data="cells"
        style="width: 100%"
      >
        <el-table-column
          show-overflow-tooltip
          prop="cellCode"
          label="编码"
          width="200"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="xCoordinate"
          label="X坐标"
          width="100"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="yCoordinate"
          label="Y坐标"
          width="100"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="shelfCode"
          label="货位组"
          width="200"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="cellUseType"
          label="使用类型"
          width="150"
        >
          <template slot-scope="scope">
            <span
              v-for="(item, index) in cellUseTypes"
              :key="index"
              v-if="item.value === scope.row.cellUseType"
              >{{ item.label }}</span
            >
          </template>
        </el-table-column>
        <!-- <el-table-column

          show-overflow-tooltip
          prop="quantityLimit"
          label="数量限制"
          min-width="100">

        </el-table-column> -->
        <!-- <el-table-column
          show-overflow-tooltip
          prop="skuLimit"
          label="sku种类限制"
          min-width="100"
        >
        </el-table-column> -->
        <!-- <el-table-column
            show-overflow-tooltip
            prop="cellAbcLevel"
            label="周转需求"
            min-width="80">
          <template slot-scope="scope">
            <span v-for="(item,index) in cellAbcLevels" :key="index"
                  v-if="item.value === scope.row.cellAbcLevel">{{ item.label }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column

           show-overflow-tooltip
           prop="cellPickType"
           label="拣货方式"
           width="80">
           <template slot-scope="scope">
             <span v-for="(item, index) in cellPickTypes" :key="index" v-if="item.value === scope.row.cellPickType">{{item.label}}</span>
           </template>
         </el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="groundOrder"
          label="上架顺序"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="pickOrder"
          label="拣货顺序"
          min-width="150"
        >
        </el-table-column>
        <!--<el-table-column
          sortable
          show-overflow-tooltip
          prop="cellAttribute"
          label="货位属性"
          width="180">
        </el-table-column>-->
        <!--<el-table-column
          sortable
          show-overflow-tooltip
          prop="cellHandle"
          label="货位处理"
          width="180">
        </el-table-column>-->
        <!-- <el-table-column
            show-overflow-tooltip
            prop="length"
            label="长"
            min-width="50">
        </el-table-column>
        <el-table-column
            show-overflow-tooltip
            prop="wide"
            label="宽"
            min- width="50">
        </el-table-column>
        <el-table-column
            align=""
            show-overflow-tooltip
            prop="high"
            label="高"
            min-width="50">
        </el-table-column> -->
        <!-- <el-table-column

          show-overflow-tooltip
          prop="volumeLimit"
          label="体积限制"
          width="80">
          <template slot-scope="scope">
            <span>{{scope.row.volumeLimit }}</span>
          </template>
        </el-table-column>
        <el-table-column

          show-overflow-tooltip
          prop="weightLimit"
          label="重量限制"
          width="80">
          <template slot-scope="scope">
            <span>{{scope.row.weightLimit }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column

          show-overflow-tooltip
          prop="boxLimit"
          label="箱数限制"
          width="80">
          <template slot-scope="scope">
            <span>{{scope.row.boxLimit }}</span>
          </template>
        </el-table-column> -->
        <!--<el-table-column
          sortable
          show-overflow-tooltip
          prop="quantityLimit"
          label="数量限制"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.quantityLimit.toFixed(2)}}</span>
          </template>
        </el-table-column>-->
        <!-- <el-table-column

          show-overflow-tooltip
          prop="palletLimit"
          label="托盘数"
          width="0">
          <template slot-scope="scope">
            <span>{{scope.row.palletLimit }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column
            filter-multiple
            show-overflow-tooltip
            fixed="right"
            prop="state"
            label="状态"
            min-width="60"
        >
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.state"
                @change="changeEnableOrDisable(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="enable"
                inactive-value="disable">
            </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-dropdown
              style="margin-left: 10px; margin-right: 10px"
              size="mini"
              type="primary"
              icon="iconfont icon-print"
              @click="demoPrint(scope.row.cellCode)"
              split-button
            >
              打印
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    size="small"
                    type="primary"
                    @click="$EventBus.$emit('setPrinter')"
                    >打印设置</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    style="margin-top: 2px"
                    size="small"
                    type="primary"
                    @click="demoPrint(scope.row.cellCode, 1)"
                    >打印预览1
                  </el-button>
                </el-dropdown-item>

                <el-dropdown-item>
                  <el-button
                    style="margin-top: 2px"
                    size="small"
                    type="primary"
                    @click="demoPrint(scope.row.cellCode, 2)"
                    >打印预览2
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button
              @click="showUpdateModal(scope.row)"
              icon="iconfont icon-bianji"
              type="text"
              size="small"
            ></el-button>
            <el-button
              @click="isDelete(scope.row.cellId)"
              icon="iconfont icon-shanchu"
              type="text"
              class="tableBtn danger"
              size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination-bottom"
        style="text-align: right"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-sizes="[10, 15, 20, 25]"
        :current-page.sync="searchData.pageNum"
        :page-size="searchData.pageSize"
        layout="sizes, total, prev, pager, next, jumper"
        :total="searchData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Shelf",
  data() {
    let validateCellCode = (rule, value, callback) => {
      PF.validator(
        rule,
        value,
        callback,
        "cell_info",
        "cell_code",
        this.form.cellCode,
        0
      );
    };
    let validateCellCode2 = (rule, value, callback) => {
      PF.validator(
        rule,
        value,
        callback,
        "cell_info",
        "cell_code",
        this.rowData.cellCode,
        1,
        this.rowData.cellId
      );
    };
    let validateCellName = (rule, value, callback) => {
      PF.validator(
        rule,
        value,
        callback,
        "cell_info",
        "cell_name",
        this.form.cellName,
        0
      );
    };
    let validateCellName2 = (rule, value, callback) => {
      PF.validator(
        rule,
        value,
        callback,
        "cell_info",
        "cell_name",
        this.rowData.cellName,
        1,
        this.rowData.cellId
      );
    };
    let validateNo0 = (rule, value, callback) => {
      if (value === 0) {
        callback(new Error("不能为 0"));
      } else {
        callback();
      }
    };
    return {
      isMoreSearch: false,
      loading: {
        table: true,
      },
      wareId: PF.getLocal("wareId", "number"),
      searchData: {
        pageNum: 1,
        pageSize: 10,
        total: null,
        keyWords: "",
        wareId: PF.getLocal("wareId", "number"),
        shelfInfoId: null,
        cellUseType: null,
        cellAbcLevel: null,
        cellPickType: null,
        xCoordinate: "",
        yCoordinate: "",
      },

      cells: [],
      shelfs: [],
      lengthWideHigh: [],

      dialogNewVisible: false,
      dialogUpdateVisible: false,

      form: {
        shelfInfoId: null,
        cellCode: "",
        cellName: "",
        groundOrder: 1,
        pickOrder: 1,
        cellUseType: null,
        length: null,
        wide: null,
        high: null,
        cellAbcLevel: "",
        volumeLimit: null,
        weightLimit: null,
        boxLimit: null,
        quantityLimit: null,
        palletLimit: 1,
        xCoordinate: 1,
        yCoordinate: 1,
        cellPickType: "",
      },
      rules: {
        shelfInfoId: [
          { required: true, message: "请选择货位组", trigger: "blur" },
        ],
        cellCode: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { validator: validateCellCode, trigger: "blur" },
        ],
        cellName: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { validator: validateCellName, trigger: "blur" },
        ],
        // groundOrder: [
        //   {required: true, message: '请输入上架顺序', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // pickOrder: [
        //   {required: true, message: '请输入拣货顺序', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        cellUseType: [
          { required: true, message: "请选择货位使用类型", trigger: "blur" },
        ],
        // length: [
        //   {required: true, message: '请输入长', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // wide: [
        //   {required: true, message: '请输入宽', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // high: [
        //   {required: true, message: '请输入高', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // cellAbcLevel: [
        //   {required: true, message: '请选择周转需求', trigger: 'blur'}
        // ],
        // volumeLimit: [
        //   {required: true, message: '请输入体积限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // weightLimit: [
        //   {required: true, message: '请输入重量限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // boxLimit: [
        //   {required: true, message: '请输入箱数限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // palletLimit: [
        //   {required: true, message: '请输入托盘限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // xCoordinate: [
        //   {required: true, message: '请输入X坐标', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // yCoordinate: [
        //   {required: true, message: '请输入Y坐标', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // cellPickType: [
        //   {required: true, message: '请选择拣货方式', trigger: 'blur'}
        // ],
      },
      formLabelWidth: "120px",

      rowData: {
        shelfInfoId: null,
        cellCode: "",
        cellName: "",
        groundOrder: null,
        pickOrder: null,
        cellUseType: null,
        // cellAttribute: '',
        // cellHandle: '',
        length: null,
        wide: null,
        high: null,
        cellAbcLevel: "",
        volumeLimit: null,
        weightLimit: null,
        boxLimit: null,
        quantityLimit: null,
        palletLimit: null,
        xCoordinate: null,
        yCoordinate: null,
        cellPickType: "",
      },
      rules2: {
        shelfInfoId: [
          { required: true, message: "请选择货位组", trigger: "blur" },
        ],
        cellCode: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { validator: validateCellCode2, trigger: "blur" },
        ],
        cellName: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { validator: validateCellName2, trigger: "blur" },
        ],
        // groundOrder: [
        //   {required: true, message: '请输入上架顺序', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // pickOrder: [
        //   {required: true, message: '请输入拣货顺序', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        cellUseType: [
          { required: true, message: "请选择货位使用类型", trigger: "blur" },
        ],
        /*cellAttribute: [
          {required: true, message: '请输入货位属性', trigger: 'blur'}
        ],*/
        /*cellHandle: [
          {required: true, message: '请输入货位处理', trigger: 'blur'}
        ],*/
        // length: [
        //   {required: true, message: '请输入长', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // wide: [
        //   {required: true, message: '请输入宽', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // high: [
        //   {required: true, message: '请输入高', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // cellAbcLevel: [
        //   {required: true, message: '请选择周转需求', trigger: 'blur'}
        // ],
        // volumeLimit: [
        //   {required: true, message: '请输入体积限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // weightLimit: [
        //   {required: true, message: '请输入重量限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // boxLimit: [
        //   {required: true, message: '请输入箱数限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // quantityLimit: [
        //   {required: true, message: '请输入数量限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // palletLimit: [
        //   {required: true, message: '请输入托盘限制', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // xCoordinate: [
        //   {required: true, message: '请输入X坐标', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // yCoordinate: [
        //   {required: true, message: '请输入Y坐标', trigger: 'blur'},
        //   {validator: validateNo0, trigger: 'blur'}
        // ],
        // cellPickType: [
        //   {required: true, message: '请选择拣货方式', trigger: 'blur'}
        // ],
      },
    };
  },
  computed: {
    ...mapState(["cellUseTypes", "cellAbcLevels", "cellPickTypes"]),
    formVolumeLimitMax() {
      if (this.form.length > 0 && this.form.wide > 0 && this.form.high > 0) {
        let volume = this.form.length * this.form.wide * this.form.high;
        return volume;
      } else {
        return 0;
      }
    },
    rowDataVolumeLimitMax() {
      if (
        this.rowData.length > 0 &&
        this.rowData.wide > 0 &&
        this.rowData.high > 0
      ) {
        let volume =
          this.rowData.length * this.rowData.wide * this.rowData.high;
        return volume;
      } else {
        return 0;
      }
    },
  },
  methods: {
    //打印
    demoPrint: function (cellCode, isReview) {
      var that = this;

      IOT.getServerData(
        "/cell/infos/print",
        "get",
        { cellCode: cellCode, wareId: that.wareId },
        (ret) => {
          if (ret.code === 200) {
            var strHTML = ret.data;
            that.$EventBus.$emit.printHtml(strHTML, isReview);
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        },
        true
      );
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getCellData();
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      this.getCellData();
    },
    clearSearchData() {
      this.searchData.keyWords = "";
      this.searchData.shelfInfoId = null;
      this.searchData.cellUseType = null;
      this.searchData.cellAbcLevel = null;
      this.searchData.cellPickType = null;
      this.searchData.xCoordinate = "";
      this.searchData.yCoordinate = "";
    },
    getCellData() {
      this.loading.table = true;
      IOT.getServerData("/cell/infos/list", "get", this.searchData, (ret) => {
        this.loading.table = false;
        if (ret.code === 200) {
          this.cells = ret.rows;
          this.searchData.total = ret.total;
          this.searchData.pageNum = ret.pageNumber;
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }
      });
    },
    getShelfData() {
      IOT.getServerData(
        "/shelf/infos/list",
        "get",
        { wareId: PF.getLocal("wareId", "number"),
          pageNum:1,
          pageSize:9999
                },
        (ret) => {
          if (ret.code === 200) {
            this.shelfs = ret.rows;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
    getSysParamData() {
      IOT.getServerData(
        "/sys/params",
        "get",
        { moduleCode: "cellValue" },
        (ret) => {
          if (ret.code === 200) {
            this.sysParams = ret.rows;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        }
      );
    },
    commitForm(formName) {
      let that = this;
      IOT.showOverlay("保存中，请稍等...");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          IOT.getServerData("/cell/infos/insert", "post", this.form, (ret) => {
            IOT.hideOverlay();
            if (ret.code === 200) {
              IOT.tips("保存成功！", "success", 1000, () => {
                that.getCellData();
              });
            } else {
              IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
            }
          });
          this.resetForm("form");
          this.dialogNewVisible = false;
        } else {
          IOT.hideOverlay();
          console.error("error submit!!");
          return false;
        }
      });
    },
    updateForm(formName) {
      let that = this;
      IOT.showOverlay("保存中，请稍等...");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          IOT.getServerData(
            "/cell/infos/update",
            "post",
            this.rowData,
            (ret) => {
              IOT.hideOverlay();
              if (ret.code === 200) {
                IOT.tips("保存成功！", "success", 1000, () => {
                  that.getCellData();
                });
              } else {
                IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
              }
            }
          );
          this.resetForm("rowData");
          this.dialogUpdateVisible = false;
        } else {
          IOT.hideOverlay();
          console.error("error submit!!");
          return false;
        }
      });
    },
    showUpdateModal(row) {
      this.rowData = JSON.parse(JSON.stringify(row));
      this.dialogUpdateVisible = true;
    },
    resetForm(formName) {
      // 重置
      this.$refs[formName].resetFields();
    },
    handleClose(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      this.resetForm("form");
      this.dialogNewVisible = false;
      //     done();
      // })
      // .catch(_ => {});
    },
    handleClose2(done) {
      // this.$confirm('确认关闭？')
      //     .then(_ => {
      this.resetForm("rowData");
      this.dialogUpdateVisible = false;
      //     done();
      // })
      // .catch(_ => {});
    },
    isDelete(id) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.deleteCell(id);
        })
        .catch((_) => {});
    },
    deleteCell(id) {
      let that = this;
      IOT.showOverlay("删除中，请稍等...");
      IOT.getServerData("/cell/infos/delete", "get", { id: id }, (ret) => {
        IOT.hideOverlay();
        if (ret.code === 200) {
          IOT.tips("删除成功！", "success", 1000, () => {
            that.getCellData();
          });
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }
      });
    },
    changeEnableOrDisable(row) {
      IOT.getServerData(
        "/cell/infos/" + row.state,
        "get",
        {
          cellCode: row.cellCode,
          wareId: PF.getLocal("wareId", "number"),
        },
        (ret) => {
          if (ret.code === 200) {
            if (row.state === "enable") {
              IOT.tips(row.cellCode + " 已启用！", "success");
            } else if (row.state === "disable") {
              IOT.tips(row.cellCode + " 已禁用！", "error");
            }
            this.getCellData();
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
            this.getCellData();
          }
        }
      );
    },
    showNewModal() {
      for (let i = 0; i < this.lengthWideHigh.length; i++) {
        this.form[this.lengthWideHigh[i].paramCode] =
          this.lengthWideHigh[i].value;
      }
      this.dialogNewVisible = true;
      this.changeVolume();
    },
    changeVolume() {
      if (this.form.length > 0 && this.form.wide > 0 && this.form.high > 0) {
        this.form.volumeLimit = (
          this.form.length *
          this.form.wide *
          this.form.high
        ).toFixed(4);
      }
    },
  },
  created() {
    this.getCellData();
    this.getShelfData();
    this.getSysParamData();
    PF.getSysParamUdfData("lengthWideHigh", [], (data, udfs) => {
      this.lengthWideHigh = udfs;
    });
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.cell {
}
</style>
